<template>

	<div>

		<div style="margin-bottom: 20px">
			<i class="el-icon-warning"></i>
			<label style="font-size: 18px" >
				注意：红色代表错误,浅绿代表正确,黄色的是正确答案
			</label>
            <label style="margin-left: 380px;font-size: 30px;">得分:  <span style="color: red">{{this.checkCount}}</span></label>
		</div>

		<div class="item">
			<div class="item-list" v-for="item in exercise.computedDtos">
				<label class="l1">{{item.example}}</label>
				<div class="d2" >
					<label v-if="item.rightOrWrong==1" style="color: chartreuse">{{item.sum}}</label>
					<label v-if="item.rightOrWrong==0" style="color: red">{{item.sum}}</label>

					<label style="margin-left:10px;color: gold">({{item.trueSum}})</label>

				</div>
			</div>
		</div>


	</div>
</template>

<script>
	export default {
		name: "Index",
		props: [ "cpDatas"],
		data() {
			return {
				ruleForm: {
					sum: ''
				},
				exercise:{
					computedDtos:[],
					id: ''
				},
				grade: '',
				dataList: [],
				editForm: {
					exType: '1',
					number: '50',
				},
                checkCount: '',
				count: '', //倒计时
				seconds: 1200, // 20分钟
				flag: null,
			};
		},
		created() {
			this.getUserList()
		},
		// mounted() {
		// 	this.Time() //调用定时器
		// },
		methods: {

			submitForm() {

				let equations = this.exercise
				if(this.seconds===0){
					this.$message.error('已超时,请重新选择!')
				}else{
					this.$axios.post("/example/check", equations).then(res => {
						this.grade = res.data.data

						this.$message({
							showClose: true,
							message: '恭喜你，操作成功',
							type: 'success',
						});
					})
				}
			},
			getUserList() {
				const exercisesId = this.cpDatas
				this.$axios.get('/example/'+exercisesId, ).then(res => {

					this.exercise = res.data.data
                    this.checkCount = this.exercise.checkCount
				})
			},
			// 取消按钮
			async cancel() {
				this.$emit('clsoer');
			},
		}

	}
</script>

<style scoped>

	::v-deep .el-input__inner {
		border-radius: 0px;
		border-top-width: 0px;
		border-left-width: 0px;
		border-right-width: 0px;
		border-bottom-width: 1px;
		/*outline: medium;*/
		width: 50%;
	}
	.item{
		display: flex;
		flex-wrap: wrap;
	}
	.item-list{
		width: 20%;
	}
	.l1{
		text-align: right;
		vertical-align: middle;
		float: left;
		line-height: 40px;
		padding: 10px 12px 0 0;
		box-sizing: border-box
	}
	.d2{
		line-height: 60px;
		position: relative;
		font-size: 14px;
		margin-left: 55px
	}

</style>
